<template>
	<view class="userCenter">
		<view class="userInfo">
			<view class="flex-align-center top">
				<image src="@/static/images/avatar.png" class="avatar" mode=""></image>
				<view class="flex-1">
					<view class="name">用户{{nickname || ''}}</view>
					<view class="phone">{{userInfo.phone}}</view>
					<view class="flex-align-center level">
						<image src="@/static/images/level.png" mode=""></image>{{userInfo.hhrInfo.level==1?'普通合伙人':userInfo.hhrInfo.level==2?'高级合伙人':userInfo.hhrInfo.level==3?'专家合伙人':''}}
					</view>
				</view>
				<view class="msg" @click="goPage('/pages/msg/index')" >
					<image src="@/static/images/msg.png" mode=""></image>
					<view class="circle"></view>
				</view>
			</view>
			<view class="flex-between-center getMoney">
				<view>
					<view class="text">累计收益</view>
					<view class="money">{{staticsInfo.ljsy || 0}}</view>
				</view>
				<view>
					<view class="text">今日收益</view>
					<view class="money">{{staticsInfo.jrsy || 0}}</view>
				</view>
			</view>
		</view>
		<view class="flex-between-center middleBox">
			<view class="flex-align-center" @click="goPage('/pages/wallet/index')" >
				<image src="https://cdcrm.oss-cn-hangzhou.aliyuncs.com/cdcrm/business/2024/4/55631714040112758.png" class="icon" mode=""></image>
				<view class="text flex-1">我的钱包</view>
				<image src="@/static/images/grayRight.png" class="right" mode=""></image>
			</view>
			<view class="flex-align-center" @click="goPage('')" >
				<image src="https://cdcrm.oss-cn-hangzhou.aliyuncs.com/cdcrm/business/2024/4/86901714040193356.png" class="icon" mode=""></image>
				<view class="text flex-1">我的还款</view>
				<image src="@/static/images/grayRight.png" class="right" mode=""></image>
			</view>
		</view>
		<view class="list">
			<view class="item flex-align-center" @click="goPage('/pages/jsOrder/index')" >
				<image src="@/static/images/jsOrder.png" class="icon" mode=""></image>
				<view class="text">结算订单</view>
				<image src="@/static/images/grayRight.png" class="right" mode=""></image>
			</view>
			<!-- <view class="item flex-align-center">
				<image src="@/static/images/dhOrder.png" class="icon" mode=""></image>
				<view class="text">兑换订单</view>
				<image src="@/static/images/grayRight.png" class="right" mode=""></image>
			</view> -->
			<view class="item flex-align-center" @click="goPage('/pages/myBankCard/index')" >
				<image src="@/static/images/myBank.png" class="icon" mode=""></image>
				<view class="text">我的银行卡</view>
				<image src="@/static/images/grayRight.png" class="right" mode=""></image>
			</view>
			<!-- <view class="item flex-align-center">
				<image src="@/static/images/shdz.png" class="icon" mode=""></image>
				<view class="text">收货地址</view>
				<image src="@/static/images/grayRight.png" class="right" mode=""></image>
			</view> -->
			<view class="item flex-align-center" @click="showCustomer = true " >
				<image src="@/static/images/connect.png" class="icon" mode=""></image>
				<view class="text">联系客服</view>
				<image src="@/static/images/grayRight.png" class="right" mode=""></image>
			</view>
			<view class="item flex-align-center" @click="goPage('/pages/about/index')" >
				<image src="@/static/images/about.png" class="icon" mode=""></image>
				<view class="text">关于我们</view>
				<image src="@/static/images/grayRight.png" class="right" mode=""></image>
			</view>
		</view>
		<customer v-if="showCustomer" @close="close" ></customer>
	</view>
</template>

<script>
	import customer from "@/components/customer.vue"
	import { toLogin } from '../../libs/login'
	import { mapGetters } from "vuex";
	import { getUserInfo,getStatistics } from "@/api/user.js"
	export default {
		components:{
			customer
		},
		data(){
			return{
				showCustomer:false,
				staticsInfo:{},
				nickname:'',
				userInfo:{}
			}
		},
		computed: {
			...mapGetters(['isLogin', 'uid']),
		},
		onShow() {
			if(!this.isLogin){
				toLogin()
			}else{
				this.getUserInfo()
				this.getStatics()
			}
		},
		methods:{
			getUserInfo(){
				getUserInfo().then(res=>{
					this.userInfo = res.data
					this.nickname = res.data.phone.slice(-4)
				})
			},
			getStatics(){
				getStatistics().then(res=>{
					this.staticsInfo = res.data
				})
			},
			close(){
				this.showCustomer = false
			},
			goPage(url){
				if(url){
					uni.navigateTo({
						url
					})
				}else{
					this.$util.Tips({
						title:'暂未开放该功能'
					})
				}
				
			}
		}
	}
</script>
<style>
	page{
		background-color: #F5F7FA;
	}
</style>
<style lang="scss" scoped >
	.userCenter{
		padding: 24rpx;
		.userInfo{
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 48rpx 24rpx;
			
			.getMoney{
				margin-top: 48rpx;
				>view{
					width: 302rpx;
					text-align: center;
					.text{
						font-family: PingFangSC;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						line-height: 24rpx;
						text-align: center;
						font-style: normal;
						margin-bottom: 16rpx;
					}
					.money{
						height: 40rpx;
						font-family: D-DINExp;
						font-weight: bold;
						font-size: 40rpx;
						color: #292929;
						line-height: 40rpx;
						text-align: center;
						font-style: normal;
					}
				}
			}
			
			.top{
				.msg{
					position: relative;
					image{
						width: 56rpx;
						height: 56rpx;
					}
					.circle{
						width: 16rpx;
						height: 16rpx;
						background: #FF3729;
						border: 2rpx solid #FFFFFF;
						border-radius: 50%;
						position: absolute;
						top: 0;
						right: 0;
					}
				}
				.avatar{
					width: 136rpx;
					height: 136rpx;
					border-radius: 50%;
					margin-right: 16rpx;
				}
				.name{
					height: 36rpx;
					font-family: PingFangSC;
					font-weight: 500;
					font-size: 36rpx;
					color: #292929;
					line-height: 36rpx;
					font-style: normal;
					margin-bottom: 16rpx;
				}
				.phone{
					height: 28rpx;
					font-family: PingFangSC;
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
					line-height: 28rpx;
					font-style: normal;
					margin-bottom: 16rpx;
				}
				.level{
					width: 184rpx;
					height: 40rpx;
					background: rgba(255,133,51,0.08);
					border-radius: 20rpx;
					padding: 0 16rpx;
					font-family: PingFangSC;
					font-weight: 500;
					font-size: 24rpx;
					color: #FF8533;
					line-height: 24rpx;
					text-align: center;
					font-style: normal;
					image{
						width: 24rpx;
						height: 20rpx;
					}
				}
			}
		}
		.middleBox{
			margin-top: 24rpx;
			>view{
				width: 340rpx;
				height: 128rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 0 24rpx;
				.icon{
					width: 64rpx;
					height: 64rpx;
					margin-right: 24rpx;
				}
				view{
					font-family: PingFangSC;
					font-weight: 500;
					font-size: 32rpx;
					color: #292929;
					line-height: 32rpx;
					text-align: left;
					font-style: normal;
				}
				.right{
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
		.list{
			margin-top: 24rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 0 24rpx;
			.item{
				padding: 48rpx 0;
				border-bottom: 2rpx solid #f5f5f5;
				&:last-child{
					border-bottom: 0;
				}
				.icon{
					width: 56rpx;
					height: 56rpx;
					margin-right: 24rpx;
				}
				view{
					font-family: PingFangSC;
					font-weight: 500;
					font-size: 28rpx;
					color: #292929;
					line-height: 28rpx;
					text-align: left;
					font-style: normal;
					flex: 1;
				}
				.right{
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
	}
</style>